import React from 'react';
import { Button, DatePicker, Space } from 'antd';
import { TjSelect, TjStation } from '@/pages/ETrade/components';
import { monthFormat } from '../../constant';
import { SettingOutlined } from '#/utils/antdIcons';
import TimeSettingModal from '../TimeSettingModal';

const { RangePicker } = DatePicker;

const width = 160;

export const Filter = ({
  buttonPermissions = [],
  province = [],
  containerLoading,
  // stations = [],
  filterParams = {},
  setFilterParams,
  filtrateClick,
  optionObj,
}) => {
  const changeValue = (v, key) => {
    if (v?.length !== 0) {
      setFilterParams({
        [key]: v,
      });
    }
  };

  const handleFiltrate = () => {
    filtrateClick();
  };

  const openSettingModal = () => {
    TimeSettingModal.show({
      province,
      // stations,
      buttonPermissions,
    });
  };

  return (
    <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
      <Space size={16}>
        <TjStation
          width={width}
          options={province}
          onChange={(v) => changeValue(v, 'stationIds')}
          value={filterParams.stationIds}
        />
        <RangePicker
          onChange={(v) => changeValue(v, 'date')}
          allowClear={false}
          style={{ width: 200 }}
          value={filterParams.date}
          format={monthFormat}
          picker="month"
        />
        <TjSelect
          style={{ width }}
          placeholder={'算法模型'}
          mode={'multiple'}
          options={optionObj?.evaluationIndicator || []}
          value={filterParams.evaluationIndicator}
          maxTagCount={2}
          onChange={(v) => changeValue(v, 'evaluationIndicator')}
        />
        <TjSelect
          style={{ width }}
          placeholder={'功率预测参考值'}
          mode={'multiple'}
          options={optionObj?.datasource || []}
          value={filterParams.datasource}
          maxTagCount={2}
          onChange={(v) => changeValue(v, 'datasource')}
        />
        <TjSelect
          style={{ width }}
          placeholder={'版本'}
          mode={'multiple'}
          options={optionObj?.leadTime || []}
          maxTagCount={2}
          value={filterParams.version}
          onChange={(v) => changeValue(v, 'version')}
        />
        <Button type={'primary'} onClick={handleFiltrate} loading={containerLoading}>
          筛选
        </Button>
      </Space>
      <Button
        type="link"
        onClick={openSettingModal}
        icon={<SettingOutlined />}
        disabled={!buttonPermissions.find((item) => item.menuCode === 'timeOrderSetting')}
      >
        时间段设置
      </Button>
    </div>
  );
};
